<template>
  <view class="comments-page">
    <view class="header">
      <text class="page-title">用户评论</text>
    </view>
    
    <view class="comments-container">
      <view class="rating-summary">
        <view class="overall-rating">
          <text class="rating-number">4.8</text>
          <view class="stars">★★★★★</view>
        </view>
        <view class="rating-count">
          <text>共32条评论</text>
        </view>
      </view>
      
      <view class="comments-list">
        <view v-for="(comment, index) in comments" :key="index" class="comment-item">
          <view class="comment-header">
            <view class="user-info">
              <text class="user-name">{{ comment.username }}</text>
              <text class="comment-time">{{ comment.time }}</text>
            </view>
            <view class="rating">
              <view class="stars">{{ getStars(comment.rating) }}</view>
            </view>
          </view>
          <view class="comment-content">
            <text>{{ comment.content }}</text>
          </view>
          <view class="comment-images" v-if="comment.images && comment.images.length > 0">
            <view 
              v-for="(image, imgIndex) in comment.images" 
              :key="imgIndex" 
              class="image-item"
              @tap="previewImage(comment.images, imgIndex)"
            >
              <image :src="image" mode="aspectFill"></image>
            </view>
          </view>
          <view class="comment-footer">
            <view class="footer-item">
              <text class="iconfont">&#xe602;</text>
              <text class="count">{{ comment.likeCount || 0 }}</text>
            </view>
            <view class="footer-item">
              <text class="iconfont">&#xe63a;</text>
              <text class="count">回复</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="!loadAll">
        <text @tap="loadMoreComments">加载更多</text>
      </view>
      <view class="load-all" v-else>
        <text>已加载全部评论</text>
      </view>
    </view>
    
    <!-- 添加评论输入区 -->
    <view class="add-comment">
      <view class="rating-input">
        <text class="rating-label">评分：</text>
        <view class="stars-input">
          <text 
            v-for="i in 5" 
            :key="i" 
            :class="{ 'active': i <= newComment.rating }" 
            @tap="setRating(i)"
          >★</text>
        </view>
      </view>
      <textarea 
        class="comment-textarea" 
        v-model="newComment.content" 
        placeholder="分享您对养老院的评价..." 
        maxlength="200"
      ></textarea>
      
      <!-- 添加图片上传区域 -->
      <view class="upload-section">
        <view class="image-preview-list">
          <view 
            v-for="(image, index) in newComment.images" 
            :key="index" 
            class="image-preview-item"
          >
            <image class="preview-image" :src="image" mode="aspectFill"></image>
            <view class="delete-icon" @tap.stop="removeImage(index)">×</view>
          </view>
          
          <view 
            class="upload-btn" 
            v-if="newComment.images.length < 3" 
            @tap="chooseImage"
          >
            <text class="plus-icon">+</text>
            <text class="upload-text">添加图片</text>
          </view>
        </view>
        <text class="upload-tips">最多可上传3张图片</text>
      </view>
      
      <view class="comment-footer">
        <view class="textarea-counter">{{ newComment.content.length }}/200</view>
        <view class="submit-btn" :class="{ 'active': isCommentValid }" @tap="submitComment">
          <text>发表评论</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';

// 养老院ID
const nursingHomeId = ref(null);

// 评论列表
const comments = ref([]);

// 是否已加载全部
const loadAll = ref(false);

// 页码
const page = ref(1);
const pageSize = 10;

// 新评论
const newComment = reactive({
  content: '',
  rating: 5,
  images: []
});

// 评论是否有效
const isCommentValid = computed(() => {
  return newComment.content.length >= 5;
});

// 初始化页面
onMounted(() => {
  // 获取路由参数中的养老院ID
  const query = uni.getSystemInfoSync().platform === 'devtools' ? 
    { id: '1' } : uni.$route.query;
    
  nursingHomeId.value = query.id;
  
  // 获取评论列表
  loadComments();
});

// 加载评论列表
const loadComments = () => {
  // 模拟API请求
  setTimeout(() => {
    // 模拟数据
    const newComments = [
      {
        id: 1,
        username: '用户1',
        time: '2023-10-15',
        rating: 5,
        content: '环境非常好，设施齐全，老人住得很舒适。工作人员态度也很好，专业细心。餐饮方面营养均衡，适合老年人需求。',
        images: ['图片1', '图片2', '图片3'],
        likeCount: 12
      },
      {
        id: 2,
        username: '用户2',
        time: '2023-10-10',
        rating: 4,
        content: '整体感觉不错，环境干净整洁，工作人员服务态度好。就是价格稍微有点高。',
        images: ['图片1'],
        likeCount: 8
      },
      {
        id: 3,
        username: '用户3',
        time: '2023-09-25',
        rating: 5,
        content: '我父亲已经在这里住了半年多，感觉很满意。医疗服务很及时，有专业的护理人员。',
        images: [],
        likeCount: 15
      },
      {
        id: 4,
        username: '用户4',
        time: '2023-09-15',
        rating: 4,
        content: '环境和设施都不错，工作人员也很有耐心。餐饮可以再提高一些。',
        images: ['图片1', '图片2'],
        likeCount: 6
      },
      {
        id: 5,
        username: '用户5',
        time: '2023-09-05',
        rating: 5,
        content: '非常满意，老人住得很开心。各项活动丰富多彩，让老人的生活很充实。',
        images: ['图片1'],
        likeCount: 10
      }
    ];
    
    if (page.value === 1) {
      comments.value = newComments;
    } else {
      comments.value = [...comments.value, ...newComments];
    }
    
    // 判断是否加载全部
    if (page.value >= 3) {
      loadAll.value = true;
    }
  }, 500);
};

// 加载更多评论
const loadMoreComments = () => {
  if (loadAll.value) return;
  
  page.value++;
  loadComments();
};

// 根据评分获取星星
const getStars = (rating) => {
  return '★'.repeat(rating) + '☆'.repeat(5 - rating);
};

// 预览图片
const previewImage = (images, current) => {
  uni.previewImage({
    urls: images,
    current: images[current]
  });
};

// 设置评分
const setRating = (rating) => {
  newComment.rating = rating;
};

// 提交评论
const submitComment = () => {
  if (!isCommentValid.value) {
    return uni.showToast({
      title: '评论内容至少5个字',
      icon: 'none'
    });
  }
  
  // 实际项目中应当调用API提交评论
  const username = uni.getStorageSync('userInfo')?.nickname || '游客';
  
  // 创建新评论对象
  const comment = {
    id: comments.value.length + 1,
    username,
    time: new Date().toISOString().split('T')[0],
    rating: newComment.rating,
    content: newComment.content,
    images: [...newComment.images], // 复制图片数组
    likeCount: 0
  };
  
  // 将新评论添加到列表
  comments.value.unshift(comment);
  
  // 重置表单
  newComment.content = '';
  newComment.rating = 5;
  newComment.images = []; // 清空图片
  
  // 提示用户
  uni.showToast({
    title: '评论发布成功',
    icon: 'success'
  });
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - newComment.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 将选择的图片添加到评论图片列表中
      newComment.images = [...newComment.images, ...res.tempFilePaths];
    },
    fail: (err) => {
      console.error('选择图片失败', err);
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
};

// 删除图片
const removeImage = (index) => {
  newComment.images.splice(index, 1);
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.comments-page {
  min-height: 100%;
  padding-bottom: 30px;
  
  .header {
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(141, 110, 99, 0.1);
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #5d4037;
    }
  }
  
  .comments-container {
    padding: 15px;
    padding-bottom: 120px; // 为评论输入区预留空间
    
    .rating-summary {
      background-color: #fff;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(93, 64, 55, 0.05);
      
      .overall-rating {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .rating-number {
          font-size: 28px;
          font-weight: 700;
          color: #5d4037;
          margin-bottom: 5px;
        }
        
        .stars {
          color: #ff9800;
          font-size: 16px;
        }
      }
      
      .rating-count {
        font-size: 14px;
        color: #8d6e63;
      }
    }
    
    .comments-list {
      .comment-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 10px rgba(93, 64, 55, 0.05);
        
        .comment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          .user-info {
            .user-name {
              font-size: 15px;
              font-weight: 600;
              color: #5d4037;
              margin-right: 10px;
            }
            
            .comment-time {
              font-size: 12px;
              color: #8d6e63;
            }
          }
          
          .rating {
            .stars {
              color: #ff9800;
              font-size: 14px;
            }
          }
        }
        
        .comment-content {
          font-size: 15px;
          color: #5d4037;
          line-height: 1.6;
          margin-bottom: 15px;
        }
        
        .comment-images {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 15px;
          
          .image-item {
            width: 80px;
            height: 80px;
            background-color: #e0e0e0;
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #5d4037;
          }
        }
        
        .comment-footer {
          display: flex;
          border-top: 1px solid rgba(141, 110, 99, 0.1);
          padding-top: 10px;
          
          .footer-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
            
            .iconfont {
              font-size: 16px;
              color: #8d6e63;
              margin-right: 5px;
            }
            
            .count {
              font-size: 14px;
              color: #8d6e63;
            }
          }
        }
      }
    }
    
    .load-more, .load-all {
      text-align: center;
      padding: 15px 0;
      font-size: 14px;
      color: #8d6e63;
    }
  }
  
  // 添加评论区域
  .add-comment {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 100;
    
    .rating-input {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
      .rating-label {
        font-size: 14px;
        color: #333;
        margin-right: 10px;
      }
      
      .stars-input {
        font-size: 20px;
        color: #ddd;
        
        text {
          margin-right: 5px;
          cursor: pointer;
          
          &.active {
            color: #ff9800;
          }
        }
      }
    }
    
    .comment-textarea {
      width: 100%;
      height: 80px;
      padding: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      font-size: 14px;
      background-color: #f9f9f9;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    
    // 图片上传区域样式
    .upload-section {
      margin-bottom: 10px;
      
      .image-preview-list {
        display: flex;
        flex-wrap: wrap;
        
        .image-preview-item {
          width: 80px;
          height: 80px;
          margin-right: 10px;
          margin-bottom: 10px;
          position: relative;
          border-radius: 4px;
          overflow: hidden;
          
          .preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .delete-icon {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
          }
        }
        
        .upload-btn {
          width: 80px;
          height: 80px;
          border: 1px dashed #ccc;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #f9f9f9;
          
          .plus-icon {
            font-size: 24px;
            color: #8d6e63;
            margin-bottom: 5px;
          }
          
          .upload-text {
            font-size: 12px;
            color: #8d6e63;
          }
        }
      }
      
      .upload-tips {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
      }
    }
    
    .comment-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .textarea-counter {
        font-size: 12px;
        color: #999;
      }
      
      .submit-btn {
        background-color: #8d6e63;
        color: #fff;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 14px;
        opacity: 0.6;
        
        &.active {
          opacity: 1;
        }
      }
    }
  }
}
</style> 